// 项目管理

import { ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons';
import {
  Badge,
  Button,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Modal,
  Select,
  Space,
  Table,
  notification,
} from 'antd';
import { useEffect, useState } from 'react';
import { request } from 'umi';
const dayjs = require('dayjs');
const { confirm } = Modal;

export default function Items() {
  // 总数据
  let [data, setData] = useState([]);
  // 回收站数据
  let [deletes, setDeletes] = useState([]);
  let [buubl, setBuubl] = useState(0);
  
  let [compData, setComp] = useState([]);
  let [editid, setid] = useState(0);
  useEffect(() => {
    request('/api/organization/project/index', {
      params: {
        status: 0,
      },
      skipErrorHandler: true,
    }).then((res) => {
      console.log(res);
      setData(res.data);
    });
    request('/api/organization/index/index', {
      params: {
        // status: 0,
      },
      skipErrorHandler: true,
    }).then((res) => {
      console.log(res);
      setComp(res.data);
    });
    request('/api/organization/project/index', {
      params: {
        status: 1,
      },
      skipErrorHandler: true,
    }).then((res) => {
      console.log(res);
      setDeletes(res.data);
      setBuubl(res.data.length)
    });
  }, []);
  function upDatas() {
    request('/api/organization/project/index', {
      params: {
        status: 0,
      },
      skipErrorHandler: true,
    }).then((res) => {
      console.log(res);
      setData(res.data);
    });
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },
    {
      title: '项目名称',
      dataIndex: 'title',
      key: 'id',
      align: 'center',
    },
    {
      title: '公司标识',
      dataIndex: 'account',
      key: 'id',
      align: 'center',
    },
    {
      title: '项目地址',
      dataIndex: 'address',
      key: 'id',
      align: 'center',
    },
    {
      title: '开始时间',
      key: 'id',
      dataIndex: 'start_time',
      align: 'center',
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      key: 'id',
      align: 'center',
    },
    {
      title: '操作',
      key: 'id',
      render: (e) => (
        <Space size="middle">
          <Button
            type="primary"
            onClick={() => {
              setOpens(true);
              setid(e.id);
              request('/api/organization/project/edit', {
                method: 'POST',
                data: {
                  id: e.id,
                },
                skipErrorHandler: true,
              }).then((res) => {
                console.log(res);
                forms.resetFields();
                setTimeout(() => {
                  forms.setFieldsValue({
                    company: res.data.companyid,
                    itemName: res.data.title,
                    itemAddress: res.data.address,
                    itemDate: [dayjs(res.data.start_time), dayjs(res.data.end_time)],
                    account: res.account[0].account,
                    accountant: res.account[0].account,
                    managerA: res.account[0].account,
                    dw_security: res.data.dw_security,
                    gr_security: res.data.gr_security,
                  });
                  console.log(forms);
                }, 100);
              });
            }}
          >
            编辑
          </Button>
          <Button
            type="primary"
            danger
            onClick={() => {
              console.log(e.id);
              confirm({
                title: '确定下架该项目?',
                icon: <ExclamationCircleFilled />,
                content: '请确认后操作',
                onOk() {
                  console.log('OK');

                  request('/api/organization/project/del', {
                    method: 'POST',
                    data: {
                      id: e.id,
                    },
                    skipErrorHandler: true,
                  }).then((res) => {
                    console.log(res);
                    // 操作成功后数据更新
                    upDatas();
                    notification['success']({
                      message: `操作成功`,
                      description: '可在回收站中进行查看',
                    });
                  });
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
          >
            下架
          </Button>
        </Space>
      ),
      align: 'center',
    },
  ];
  const colDel = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },
    {
      title: '项目名称',
      dataIndex: 'title',
      key: 'id',
      align: 'center',
    },
    {
      title: '公司标识',
      dataIndex: 'account',
      key: 'id',
      align: 'center',
    },
    {
      title: '项目地址',
      dataIndex: 'address',
      key: 'id',
      align: 'center',
    },
    {
      title: '开始时间',
      key: 'id',
      dataIndex: 'start_time',
      align: 'center',
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      key: 'id',
      align: 'center',
    },{
      title: '操作',
      key: 'id',
      render: (e) => (
        <Space size="middle">
          <Button
            type="primary"
            onClick={() => {
              setid(e.id);
              console.log(e.id);
              request('/api/organization/project/back', {
                method: 'POST',
                data: {
                  id: e.id,
                },
                skipErrorHandler: true,
              }).then((res) => {
                console.log(res);
                notification['success']({
                  message: `操作成功`,
                });
                request('/api/organization/project/index', {
                  params: {
                    status: 1,
                  },
                  skipErrorHandler: true,
                }).then((res) => {
                  console.log(res);
                  setDeletes(res.data);
                });
                upDatas();
              });
            }}
          >
            恢复
          </Button>
        </Space>
      ),
      align: 'center',
    },
  ]
  // 项目下架
  let [inpval, setInp] = useState('');
  const [open, setOpen] = useState(false);
  const [opens, setOpens] = useState(false);
  // 回收站参数
  const [recycle, setRecycle] = useState(false);
  // 日期组件参数
  const { RangePicker } = DatePicker;
  const onChange = (value) => {
    console.log('changed', value);
  };
  // 表单校验
  const [form] = Form.useForm();
  const [forms] = Form.useForm();
  let [addStatus, setAdd] = useState(0);
  function finish(values) {
    console.log('ok');
    console.log(values);
    console.log(values.itemDate[0].format('YYYY-MM-DD'));
    console.log(values.itemDate[1].format('YYYY-MM-DD'));
    request('/api/organization/project/add', {
      method: 'POST',
      data: {
        companyid: values.company,
        title: values.itemName,
        address: values.itemAddress,
        end_time: values.itemDate[1].format('YYYY-MM-DD'),
        start_time: values.itemDate[0].format('YYYY-MM-DD'),
        dw_security: values.dw_security || 0,
        gr_security: values.gr_security || 0,
        account: [values.account, values.accountant, values.managerA],
        password: [values.paddword, values.accountantP, values.managerP],
        project_type: [1, 2, 3],
      },
      skipErrorHandler: true,
    })
      .then((res) => {
        console.log(res);
        if (res.code === 1) {
          upDatas();
          notification['success']({
            message: `操作成功`,
            // description: '可在回收站中进行查看',
          });
          setOpen(false);
        } else {
          notification['error']({
            message: `操作失败`,
            // description: '可在回收站中进行查看',
          });
          setOpen(false);
        }
      })
      .catch((res) => {
        console.log(res);
      });
  }
  function unfinish(values) {
    console.log(values);
    console.log('no');
  }

  function finishs(values) {
    console.log('ok');
    console.log(values);
    console.log(values.itemDate[0].format('YYYY-MM-DD'));
    console.log(values.itemDate[1].format('YYYY-MM-DD'));
    console.log(editid);
    request('/api/organization/project/add', {
      method: 'POST',
      data: {
        projectid: editid,
        companyid: values.company,
        title: values.itemName,
        address: values.itemAddress,
        end_time: values.itemDate[1].format('YYYY-MM-DD'),
        start_time: values.itemDate[0].format('YYYY-MM-DD'),
        dw_security: values.dw_security || 0,
        gr_security: values.gr_security || 0,
        account: [values.account, values.accountant, values.managerA],
        password: [values.paddword || '', values.accountantP || '', values.managerP || ''],
        id: [1, 2, 3],
      },
      skipErrorHandler: true,
    })
      .then((res) => {
        console.log(res);
        if (res.code === 1) {
          upDatas();
          setOpens(false);
          notification['success']({
            message: `操作成功`,
            // description: '可在回收站中进行查看',
          });
        } else {
          notification['error']({
            message: `操作失败`,
            // description: '可在回收站中进行查看',
          });
          setOpen(false);
        }
      })
      .catch((res) => {
        console.log(res);
      });
  }
  function unfinishs(values) {
    console.log(values);
    console.log('no');
  }
  return (
    <div>
      <div style={{ fontWeight: '400', fontSize: '24px' }}>项目管理</div>
      <div style={searchBox}>
        <div style={{ display: 'flex' }}>
          <Input
            // onCompositionStart={Composition}
            // onCompositionEnd={Composition}
            // onCompositionUpdate={Composition}
            defaultValue={inpval}
            suffix={<SearchOutlined />}
            id="input"
            placeholder="请输入项目名称"
            onPressEnter={(e) => {
              console.log(e.target.value);
              setInp(e.target.value);
              let datas = data;
              console.log(data);
              console.log(inpval);
              setData(
                datas.filter((item) => {
                  if (String(item.title).indexOf(String(inpval)) > -1) {
                    // loading.value = true;
                    // setTimeout(() => {
                    //   loading.value = false;
                    // }, 1200);
                    console.log(item);
                    return item;
                  }
                }),
              );
              console.log(data);
            }}
          />
          <Button
            style={{ backgroundColor: '#FFFFFF', marginLeft: '10px' }}
            onClick={() => {
              setInp('');
              console.log(inpval);
              upDatas();
            }}
          >
            重置
          </Button>
        </div>
        <div>
          <Badge count={buubl} offset={[-10, 1]}>
            <Button type="primary" danger style={{ marginRight: '10px' }} onClick={()=>{
              setRecycle(true)
              request('/api/organization/project/index', {
                params: {
                  status: 1,
                },
                skipErrorHandler: true,
              }).then((res) => {
                console.log(res);
                setDeletes(res.data);
              });
            }}>
              回收站
            </Button>
          </Badge>
          <Button
            type="primary"
            style={{ backgroundColor: '#0052CC' }}
            onClick={() => {
              setOpen(true);
              form.resetFields();
            }}
          >
            新增
          </Button>
        </div>
      </div>
      <Table  rowKey="id"  columns={columns} bordered dataSource={data} />
      
      <Modal
        title="新增项目"
        centered
        htmlType="submit"
        maskClosable={false}
        open={open}
        onOk={async () => {
          const formData = form.getFieldValue();
          console.log(formData);
          form.submit();
        }}
        onCancel={() => setOpen(false)}
        width={950}
      >
        <Form
          labelCol={{ span: 3 }}
          style={{ marginTop: '30px' }}
          validateTrigger={['onBlur', 'onChange']}
          onFinish={finish}
          onFinishFailed={unfinish}
          name="addForm"
          form={form}
        >
          <Form.Item
            label="项目所属公司"
            name="company"
            rules={[{ required: true, message: '请选择公司' }]}
          >
            <Select
              placeholder="请选择项目所属公司"
              fieldNames={{ label: 'account', value: 'id' }}
              options={compData || []}
            />
          </Form.Item>
          <Form.Item
            label="项目名称"
            name="itemName"
            rules={[{ required: true, message: '请填写项目名称', validateTrigger: 'onBlur' }]}
          >
            <Input placeholder="请输入项目名称,例:人力资源项目-A" />
          </Form.Item>
          <Form.Item
            label="项目地址"
            name="itemAddress"
            rules={[{ required: true, message: '请填写项目地址', validateTrigger: 'onBlur' }]}
          >
            <Input placeholder="请输入项目地址" />
          </Form.Item>
          <Form.Item
            label="项目周期"
            name="itemDate"
            rules={[{ required: true, message: '请填写项目周期' }]}
          >
            <RangePicker style={{ width: '100%' }} />
          </Form.Item>
          <div style={smlInput}>
            <Form.Item
              label="操作员账号"
              style={{ width: '31%' }}
              labelCol={{ span: 10 }}
              name="account"
              rules={[{ required: true, message: '请填写操作员账号', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入操作员账号" />
            </Form.Item>
            <Form.Item
              label=" 操作员密码"
              style={{ width: '31%' }}
              labelCol={{ span: 10 }}
              name="paddword"
              rules={[{ required: true, message: '请填写操作员密码', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入操作员密码" />
            </Form.Item>
          </div>
          <div style={smlInput}>
            <Form.Item
              label="项目会计账号"
              labelCol={{ span: 10 }}
              name="accountant"
              rules={[{ required: true, message: '请填写会计账号', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入项目会计账号" />
            </Form.Item>
            <Form.Item
              label="项目会计密码"
              labelCol={{ span: 10 }}
              name="accountantP"
              rules={[{ required: true, message: '请填写会计密码', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入项目会计密码" />
            </Form.Item>
          </div>
          <div style={smlInput}>
            <Form.Item
              label="项目经理账号"
              labelCol={{ span: 10 }}
              name="managerA"
              rules={[{ required: true, message: '请输入项目经理账号', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入项目经理账号" />
            </Form.Item>
            <Form.Item
              label="项目经理密码"
              labelCol={{ span: 10 }}
              name="managerP"
              rules={[{ required: true, message: '请输入项目经理密码', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入项目经理密码" />
            </Form.Item>
          </div>
          <Form.Item label="个人社保基数" name="dw_security">
            <InputNumber min={0} value={0} onChange={onChange} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="单位社保基数" name="gr_security">
            <InputNumber min={0} value={0} onChange={onChange} style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>
      {/* ------------------------------------------------编辑窗口---------------------------------------------- */}
      <Modal
        title="编辑项目"
        centered
        htmlType="submit"
        maskClosable={false}
        open={opens}
        onOk={async () => {
          const formData = forms.getFieldValue();
          console.log(formData);
          forms.submit();
        }}
        onCancel={() => setOpens(false)}
        width={950}
      >
        <Form
          labelCol={{ span: 3 }}
          style={{ marginTop: '30px' }}
          validateTrigger={['onBlur', 'onChange']}
          onFinish={finishs}
          onFinishFailed={unfinishs}
          name="editForm"
          form={forms}
        >
          <Form.Item
            label="项目所属公司"
            name="company"
            rules={[{ required: true, message: '请选择公司' }]}
          >
            <Select
              placeholder="请选择项目所属公司"
              fieldNames={{ label: 'account', value: 'id' }}
              options={compData || []}
            />
          </Form.Item>
          <Form.Item
            label="项目名称"
            name="itemName"
            rules={[{ required: true, message: '请填写项目名称', validateTrigger: 'onBlur' }]}
          >
            <Input placeholder="请输入项目名称,例:人力资源项目-A" />
          </Form.Item>
          <Form.Item
            label="项目地址"
            name="itemAddress"
            rules={[{ required: true, message: '请填写项目地址', validateTrigger: 'onBlur' }]}
          >
            <Input placeholder="请输入项目地址" />
          </Form.Item>
          <Form.Item
            label="项目周期"
            name="itemDate"
            rules={[{ required: true, message: '请填写项目周期' }]}
          >
            <RangePicker style={{ width: '100%' }} />
          </Form.Item>
          <div style={smlInput}>
            <Form.Item
              label="操作员账号"
              style={{ width: '31%' }}
              labelCol={{ span: 10 }}
              name="account"
              rules={[{ required: true, message: '请填写操作员账号', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入操作员账号" />
            </Form.Item>
            <Form.Item
              label=" 操作员密码"
              style={{ width: '31%' }}
              labelCol={{ span: 10 }}
              name="paddwords"
            >
              <Input placeholder="请输入操作员密码" />
            </Form.Item>
          </div>
          <div style={smlInput}>
            <Form.Item
              label="项目会计账号"
              labelCol={{ span: 10 }}
              name="accountant"
              rules={[{ required: true, message: '请填写会计账号', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入项目会计账号" />
            </Form.Item>
            <Form.Item label="项目会计密码" labelCol={{ span: 10 }} name="accountantPs">
              <Input placeholder="请输入项目会计密码" />
            </Form.Item>
          </div>
          <div style={smlInput}>
            <Form.Item
              label="项目经理账号"
              labelCol={{ span: 10 }}
              name="managerA"
              rules={[{ required: true, message: '请输入项目经理账号', validateTrigger: 'onBlur' }]}
            >
              <Input placeholder="请输入项目经理账号" />
            </Form.Item>
            <Form.Item label="项目经理密码" labelCol={{ span: 10 }} name="managerPs">
              <Input placeholder="请输入项目经理密码" />
            </Form.Item>
          </div>
          <Form.Item label="个人社保基数" name="dw_security">
            <InputNumber min={0} value={0} onChange={onChange} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="单位社保基数" name="gr_security">
            <InputNumber min={0} value={0} onChange={onChange} style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>

      {/* ----------------------------------------------回收站弹窗--------------------------------------------- */}
      <Modal
        title="项目回收站"
        centered
        htmlType="submit"
        maskClosable={false}
        open={recycle}
        onOk={async () => {}}
        onCancel={() => setRecycle(false)}
        width={1100}
        footer = {null}
      >
        <Table columns={colDel}  rowKey="id"  bordered dataSource={deletes} />
      </Modal>
    </div>
  );
}
const searchBox = {
  wdith: '100%',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  margin: '20px 0',
};
const smlInput = {
  display: 'flex',
};
